<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myController">
    <div class="page-header">
        <h1>Users</h1>
    </div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>编辑</th>
                <th>姓</th>
                <th>名</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users">
            <td><button class="btn btn-default" ng-click="edit($index)"><span class="glyphicon glyphicon-pencil"></span>编辑</button></td>
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    <button class="btn btn-success" ng-click="createUser()"><span class="glyphicon glyphicon-user"></span> 创建新用户</button>
    <hr>
    <h2 ng-show="createBol">创建新用户</h2>
    <h2 ng-hide="createBol">编辑用户</h2>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="col-sm-1 control-label">姓</label>
            <div class="col-sm-11">
                <!--ng-disabled用于判断是否可以编辑-->
                <input type="text" class="form-control" ng-model="firstName" ng-disabled="isEdit">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">名</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" ng-model="lastName" ng-disabled="isEdit">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">密码</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" ng-model="passw1">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">重复密码</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" ng-model="passw2">
            </div>
        </div>
    </form>
    <hr>
    <button class="btn btn-success" ng-click="userSave()" ng-disabled="isSave()"><span class="glyphicon glyphicon-save"></span> 保存</button>
</div>

<script type="application/javascript" src="js/angular.min.js"></script>
<script type="application/javascript" src="js/md5-min.js"></script>
<script type="application/javascript">
//    var users = [{firstName:'张',lastName:'三',passw:'111'},{firstName:'李',lastName:'四',passw:'111'},{firstName:'王',lastName:'五',passw:'111'}];
//    alert(hex_md5("111"));
    var app = angular.module("myApp",[]);
    app.controller("myController",function ($scope,$http) {
//        $scope.users = users;
        $scope.users = [];
        $http.get("http://127.0.0.1:8080/users?act=all").success(function (data) {
            if(data.err == 1){
                console.log("获取失败");
            }
            $scope.users = data;
        });
        //默认显示创建title
        $scope.createBol = true;
        //默认不可以修改
        $scope.isEdit = false;
        //清空更改框里的内容
        function resetFn() {
            $scope.firstName = "";
            $scope.lastName = "";
            $scope.passw1 = "";
            $scope.passw2 = "";
            $scope.isEdit = false;
            $scope.createBol = true;
        }
        var thisIndex = 0;
        var thisUser = null;
        //定义一个方法 编辑用户
        $scope.edit = function (index) {
            thisIndex = index;
            thisUser = $scope.users[index];
            console.log(index);
            $scope.createBol = false;
            $scope.isEdit = true;
            $scope.firstName = $scope.users[index].firstName;
            $scope.lastName = $scope.users[index].lastName;
        };
        //创建新用户
        $scope.createUser = function () {
            $scope.createBol = true;
            resetFn();
        };
        //保存用户
        $scope.userSave = function () {
            //为true的时候创建用户
          if($scope.createBol){
              $http.get("http://127.0.0.1:8080/users",{
                params:{
                    act:"add",
                    firstName:$scope.firstName,
                    lastName:$scope.lastName,
                    passw:hex_md5($scope.passw1)
                }
              }).success(function (data) {
                  if(data.err == 0){

                      $scope.users.push({
                          firstName:$scope.firstName,
                          lastName:$scope.lastName,
                          passw:$scope.passw1

                      });
                      resetFn();
                      console.log("用户创建成功");
                  }
              });
          } else{
              $http.get("http://127.0.0.1:8080/users",{
                  params:{
                      act:"update",
                      firstName:$scope.firstName,
                      lastName:$scope.lastName,
                      passw:hex_md5($scope.passw1)
                  }
              }).success(function (data) {
                  if(data.err == 0){
                      $scope.users[thisIndex].passw = $scope.passw1;
                      resetFn();
                  }
              });
          }
        };
        //验证
        $scope.isSave = function () {
            if($scope.createBol){
                //新建用户
                return !($scope.firstName && $scope.lastName && $scope.passw1 && $scope.passw2 && $scope.passw1 == $scope.passw2);
            } else{
                console.log($scope.passw1);
                //编辑
                return !(thisUser.passw != $scope.passw1 && $scope.passw1 && $scope.passw1 == $scope.passw2);
            }
        }
    });
</script>

</body>
</html>